<template>
  <div class="index">
    <van-nav-bar title="主页" class="index-title" fixed z-index="99" />
    <!-- 频道列表 -->
    <van-tabs sticky offset-top="46px" v-model="active">
      <van-tab v-for="(item, index) in channelList" :title="item.name" :key="index">
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
          <!-- 文章列表 -->
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            @load="onLoad">
            <!-- 文章列表内容 -->
            <van-cell-group>
              <van-cell v-for="(subitem, subindex) in item.articleList" :key="subindex" @click="$router.push(`/detail/${subitem.art_id}`)">
                <template #title>
                  <h3>{{ subitem.title }}</h3>
                  <van-grid :border="false" :column-num="3" v-if="subitem.cover.type !== 0">
                    <van-grid-item v-for="(imgitem, imgindex) in subitem.cover.images" :key="imgindex">
                      <van-image :src="imgitem" />
                    </van-grid-item>
                  </van-grid>
                  <div class="box">
                    <div class="left">
                      <span>{{ subitem.aut_name }}</span>
                      <span>{{ subitem.comm_count }} 评论</span>
                      <span>{{ subitem.pubdate | timeFilter }}</span>
                    </div>
                    <div class="right" @click.stop="openmore(subitem)">
                      <van-icon name="more" />
                    </div>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 菜单按钮 -->
    <div class="menu-btn" @click="openChannel">
      <van-icon name="wap-nav" />
    </div>
    <!-- 更多面板 -->
    <more ref="more" :artId="artId" :autId="autId" @delDislike="dislike"></more>
    <!-- 频道面板 -->
    <channel ref="channel" :channelList="channelList" :active.sync="active" @declare="declare"></channel>
  </div>
</template>

<script>
import { apiChannelData } from '@/api/channels.js'
import { localGet } from '@/utils/local.js'
import { apiGetArticle } from '@/api/article.js'
import more from './com/more'
import channel from './com/channel'

export default {
  components: {
    more,
    channel
  },
  data () {
    return {
      // 频道列表
      channelList: [],
      active: 0,
      artId: 0, // 文章id
      autId: 0 // 作者id
      // loading: false,
      // finished: false,
      // isLoading: false
    }
  },
  methods: {
    // 获取频道列表数据
    async getChannelData () {
      // 判断用户是否登录
      const token = this.$store.state.userInfo.token
      if (token) {
        // 登录，则从服务器中获取数据
        const res = await apiChannelData()
        console.log('文章列表数据', res)
        this.channelList = res.data.channels
      } else {
        // 未登录，先从本地获取频道列表数据,本地没有则从服务器中获取默认的数据
        const currentChannel = localGet('channels')
        if (currentChannel) {
          this.channelList = currentChannel
        } else {
          const res = await apiChannelData()
          this.channelList = res.data.channels
        }
      }
      this.otherProps()
    },
    // onLoad事件
    async onLoad () {
      console.log('onLoad')
      // 获取当前频道数据
      const currentData = this.channelList[this.active]
      // 获取文章数据
      const res = await apiGetArticle(currentData.id)
      console.log('文章列表数据', res)
      currentData.articleList = [...currentData.articleList, ...res.data.results]
      currentData.loading = false
      if (res.data.results.length === 0) {
        currentData.finished = true
      }
    },
    // onRefresh下拉刷新
    async onRefresh () {
      console.log('onRefresh')
      // 像服务器请求新的数据
      const currentData = this.channelList[this.active]
      const res = await apiGetArticle(currentData.id)
      currentData.articleList = res.data.results
      // 清空以前的数据
      currentData.loading = false
      currentData.isLoading = false
      currentData.finished = false
    },
    // 将不同的频道列表数据分开
    otherProps () {
      this.channelList.map(item => {
        // item.articleList = []
        this.$set(item, 'articleList', [])
        // item.loading = false
        this.$set(item, 'loading', false)
        // item.finished = false
        this.$set(item, 'finished', false)
        // item.isLoading = false
        this.$set(item, 'isLoading', false)
      })
    },
    // 打开更多操作面板
    openmore (item) {
      this.$refs.more.show = true
      this.artId = item.art_id
      this.autId = item.aut_id
    },
    // 打开频道选择面板
    openChannel () {
      this.$refs.channel.show = true
    },
    // 点击删除频道的bug
    declare () {
      this.active--
    },
    // 不感兴趣
    dislike (val) {
      // 遍历 (接收子组件传回来的id，删除对应的文章)
      this.channelList[this.active].articleList.forEach((item, index) => {
        if (item.art_id === val) {
          this.channelList[this.active].articleList.splice(index, 1)
        }
      })
    }
  },
  created () {
    this.getChannelData()
  }
}
</script>

<style lang="less" scoped>
.index{
  margin-top: 46px;
  margin-bottom: 50px;

  .index-title {
    background-color: #3296fa;
  }

  /deep/.van-nav-bar__title {
    color: #fff;
  }

  /deep/.van-tabs--line .van-tabs__wrap {
    width: 90%;
  }

  .menu-btn{
    position: fixed;
    top: 46px;
    right: 0;
    width: 10%;
    height: 44px;
    line-height: 50px;
    text-align: center;
    background-color: #3296fa;
    color: #fff;
    font-size:24px;
  }

  .box{
    display: flex;
    justify-content: space-between;
  }

  .left{
    span{
      margin-right: 10px;
    }
  }
}
</style>
